import './blog.less'
import axios from '@/http'
import Input from '@/component/input/Input'
import BlogItem from './blogItem'
import { useEffect, useState } from 'react'
import { Tblog } from '@/type'
import { AxiosResponse } from 'axios'
import VList from '@/component/vList/VList'
import { limitFnUtil } from '@/util/util'
const Blog = () => {
  const changeTheme = () => {
    // document.body.className = 'dark'
  }
  const [pageNum, setPageNum] = useState<number>(1)
  const [blogList, setBlogList] = useState<Tblog[]>([])
  useEffect(() => {
    getBlogList(pageNum, (res: AxiosResponse<any, any>) => {
      setBlogList(res.data.recordList)
    })
  }, [])
  const getBlogList = (pageNum: number, cb?: Function, title?: string) => {
    axios
      .get('/blog/pagelist', {
        params: {
          pageNum,
          pageSize: 10,
          title
        }
      })
      .then(res => {
        cb && cb(res)
      })
  }
  const getNextList = (cb: Function) => {
    const currentPageNum = pageNum + 1
    getBlogList(currentPageNum, (res: AxiosResponse<any, any>) => {
      setBlogList([...blogList, ...res.data.recordList])
      setPageNum(currentPageNum)
      cb && cb()
    })
  }
  const limitReqTime = () => {
    limitFnUtil((limit: { flag: boolean }) => {
      getNextList(() => {
        limit.flag = true
      })
    })
  }
  const searchBlogFromTitle = (title: string) => {
    getBlogList(
      1,
      (res: AxiosResponse<any, any>) => {
        setBlogList([...res.data.recordList])
        setPageNum(1)
      },
      title
    )
  }
  return (
    <div className="blog" onClick={changeTheme}>
      <div>
        <div className="blog-search">
          <Input change={searchBlogFromTitle}></Input>
        </div>
        <div className="blog-content">
          <VList callback={limitReqTime}>
            <div className="blog-content-list">
              {blogList.map(item => (
                <div key={item.id}>
                  <BlogItem blogItem={item}></BlogItem>
                </div>
              ))}
            </div>
          </VList>
        </div>
      </div>
    </div>
  )
}

export default Blog
